<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue';
import axios from 'axios';
import {BorderBox13 as DvBorderBox13} from '@kjgl77/datav-vue3'
import EZUIKit from "ezuikit-js";

interface NewestDeviceData {
  data: string;
  name: string;
}
interface Data {
  data: number;
  time: string;
}
const newestDeviceData = ref<NewestDeviceData[]>([]);
const AirTemperatureData = ref<Data[]>([]);
const soilTemperature = ref<Data[]>([]);
const carbonDioxide = ref<Data[]>([]);
const soilMoistureContent = ref<Data[]>([]);
const soilPH = ref<Data[]>([]);
// const UIKitDEMO = new EZUIKit.EZUIKitPlayer({
//   id: 'video-container',
//   url: 'ezopen://open.ys7.com/AB9831218/1.hd.live',
//   accessToken: 'at.2z2jz3q8g5m5z7z8z9zazbzcza2zazc-1z2z3z4z5z6z7z8z9zazbzcza2zazc.2z2jz3q8g5m5z7z8z9zazbzc'
// })

const getNewestDeviceData = async () => {
  try {
    const devicesResponse = await axios.get('/devices/getNewestDevicesData');
    newestDeviceData.value = devicesResponse.data;
  } catch (error) {
    console.error('获取数据失败', error);
  }
}
const getAirTemperatureData = async () => {
  try {
    const response = await axios.get('/airTemperature/get7Data');
    AirTemperatureData.value = response.data;
  } catch (error) {
    console.error('获取数据失败', error);
  }
}
const getSoilTemperatureData = async () => {
  try {
    const response = await axios.get('/soilTemperature/get7Data');
    soilTemperature.value = response.data;
  } catch (error) {
    console.error('获取数据失败', error);
  }
}
const getCarbonDioxideData = async () => {
  try {
    const response = await axios.get('/carbonDioxide/get7Data');
    carbonDioxide.value = response.data;
  } catch (error) {
    console.error('获取数据失败', error);
  }
}
const getSoilMoistureContentData = async () => {
  try {
    const response = await axios.get('/soilMoistureContent/get7Data');
    soilMoistureContent.value = response.data;
  } catch (error) {
    console.error('获取数据失败', error);
  }
}
const getSoilPHData = async () => {
  try {
    const response = await axios.get('/soilPH/get7Data');
    soilPH.value = response.data;
  } catch (error) {
    console.error('获取数据失败', error);
  }
}
const option1 = ref({
  title: {
    text: '温度/浓度变化图'
  },
  legend: {
    data: ['空气温度',  '土壤温度']
  },
  xAxis: {
    name: '次数',
    data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次']
  },
  yAxis: {
    name: '℃',
    data: 'value'
  },
  series: [
    {
      name: '空气温度',
      data: [1, 2, 3, 4, 5, 6, 7],
      type: 'line',
      stack: 'a',
      label: {
        show: true,
        formatter: '{value}℃'
      }
    },
    {
      name: '土壤温度',
      data: [1, 2, 3, 4, 5, 6, 7],
      type: 'line',
      stack: 'a',
      smooth: true,
      label: {
        show: true,
        formatter: '{value}℃'
      }
    },
  ]
})
const option2 = ref({
  title: {
    text: '二氧化碳浓度变化图'
  },
  legend: {
    data: ['二氧化碳浓度']
  },
  xAxis: {
    name: '次数',
    data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次']
  },
  yAxis: {
    name: 'ppm',
    data: 'value'
  },
  series: [
    {
      name: '二氧化碳浓度',
      data: [1, 2, 3, 4, 5, 6, 7],
      type: 'line',
      stack: 'a',
      label: {
        show: true,
        formatter: '{value}ppm'
      }
    },
  ]
})
const option3 = {
  title: {
    text: '土壤含水率和土壤PH走势图'
  },
  legend: {
    data: ['土壤含水率', '土壤PH'],
  },
  xAxis: {
    data: ['第一次', '第二次', '第三次', '第四次', '第五次', '第六次', '第七次'],
    axisLabel: {
      style: {
        rotate: 20,
        textAlign: 'left',
        textBaseline: 'top'
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: [
    {
      name: '含水率',
      data: 'value',
      min: 0,
      max: 100,
      interval: 50,
      splitLine: {
        style: {
          lineDash: [3,3]
        }
      },
      axisLabel: {
        formatter: '{value}%'
      },
      axisTick: {
        show: false
      }
    },
    {
      name: 'PH值',
      data: 'value',
      position: 'right',
      min: 0,
      max: 10,
      interval: 5,
      splitLine: {
        show: false
      },
      axisLabel: {
        formatter: '{value}PH',
      },
      axisTick: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '含水率',
      data: [1,2,3,4,5,6,7],
      type: 'bar',
      label: {
        show: true,
        formatter: '{value}%'
      },
      gradient: {
        color: ['#37a2da', '#67e0e3']
      },
      animationCurve: 'easeOutBounce'
    },
    {
      name: 'PH值',
      data: [1,2,3,4,5,6,7],
      type: 'line',
      label: {
        show: true,
        formatter: '{value}ph'
      },
      yAxisIndex: 1,
      animationCurve: 'easeOutBounce'
    }
  ]
}
const updateOption1 = () => {
  const airTemperatureSeries = option1.value.series.find(series => series.name === '空气温度');
  if (airTemperatureSeries) {
    airTemperatureSeries.data = AirTemperatureData.value.map(item => item.data);
  }
  const soilTemperatureSeries = option1.value.series.find(series => series.name === '土壤温度');
  if (soilTemperatureSeries) {
    soilTemperatureSeries.data = soilTemperature.value.map(item => item.data);
  }
}
const updateOption2 = () => {
  const carbonDioxideSeries = option2.value.series.find(series => series.name === '二氧化碳浓度');
  if (carbonDioxideSeries) {
    carbonDioxideSeries.data = carbonDioxide.value.map(item => item.data);
  }
}
const updateOption3 = () => {
  const soilMoistureContentSeries = option3.series.find(series => series.name === '含水率');
  if (soilMoistureContentSeries) {
    soilMoistureContentSeries.data = soilMoistureContent.value.map(item => item.data);
  }
  const soilPHSeries = option3.series.find(series => series.name === 'PH值');
  if (soilPHSeries) {
    soilPHSeries.data = soilPH.value.map(item => item.data);
  }
}

let intervalId: number | undefined;
onMounted(async () => {
  await getNewestDeviceData()
  await getAirTemperatureData();
  await getSoilTemperatureData();
  await getCarbonDioxideData();
  await getSoilMoistureContentData();
  await getSoilPHData();
  updateOption1();
  updateOption2();
  updateOption3();
  // await UIKitDEMO.play()
  // 设置定时器，每分钟获取一次数据
  // intervalId = window.setInterval(getNewestDeviceData, 60000);
});
onUnmounted(() => {
  // 清除定时器
  if (intervalId !== undefined) {
    window.clearInterval(intervalId);
  }
});
</script>

<template>
  <div class="w-full h-full bg-green-50">
  <div class="flex justify-between ">
    <div class="h-40% w-30% mt-5 select-none">
    <dv-border-box13 class="ml-5 bg-green-100">
      <div class="text-10 font-700 p-6">设备所采集的最新数据信息</div>
      <div v-for="device in newestDeviceData" :key="device.name" class="flex items-center">
      <div class="pl-6 pb-6 text-6">{{ device.name }}：{{ device.data }}</div>
      </div>
    </dv-border-box13>
  </div>
    <div class="w-60% mt-5 select-none mr-6">
      <dv-border-box13 class="ml-5 bg-green-50">
        <div class="text-5 font-500 p-6  flex justify-center items-center">实时监控视频画面</div>
        <div id="ezuikit-player">

        </div>
      </dv-border-box13>
    </div>
  </div>
  <div class="flex flex-row mt-15">
    <div class="w-full">
     <dv-charts :option="option1" style="width:30rem;height:30rem;"/>
    </div>
    <div class="w-full">
     <dv-charts :option="option2" style="width:30rem;height:30rem;"/>
    </div>
    <div class="w-full">
     <dv-charts :option="option3" style="width:30rem;height:30rem;"/>
    </div>
  </div>
  </div>
</template>

<style scoped>

</style>